<!--
 * @Author: gyc
 * @Date: 2020-06-05 14:39:54
 * @LastEditTime: 2020-06-05 15:27:37
 * @Description: Nuxt测试版
--> 
<template>
  <transition name="mask">
    <div class="mo-mask" @dblclick="cancel">
      <slot></slot>
    </div>
  </transition>
</template>

<script>
export default {
  name: "moMask",
  methods: {
    cancel() {
      this.$emit("cancel");
    }
  }
};
</script>

<style lang="scss" scoped>
.mo-mask {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: 999;
  //   transition: all 0.4s ease-in-out;
  //   animation: showBox 0.4s ease-in-out;
}
// .mask-leave-to {
//   transform: scale(0);
// }
@keyframes showBox {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
</style>